<template>
    <div class="qingwu">
        <div class="admin_table_page_title">
            <a-button @click="$router.back()" class="float_right" icon="arrow-left">返回</a-button>
            平台用户 {{type}}
        </div>
        <div class="unline underm"></div>
        <div class="admin_form">
            <a-form-model :label-col="{ span: 2 }" :wrapper-col="{ span: 12}">


                <a-form-model-item label="业主姓名">
                    <a-input v-model="info.truename"></a-input>
                </a-form-model-item>

                <a-form-model-item label="业主手机号">
                    <a-input v-model="info.mobile"></a-input>
                </a-form-model-item>


                <a-form-model-item label="业主身份证">
                    <a-input v-model="info.id_number" placeholder=""></a-input>
                </a-form-model-item>


                <a-form-model-item label="省/市/区">
                    <a-cascader :options="options" placeholder="请选择地址"
                                :field-names="{ label: 'name', value: 'id', children: 'children' }"
                                :default-value="areas" @change="onChangeArea"/>
                </a-form-model-item>

                <a-form-item label="区域">
                    <a-select style="width: 200px" @change="onCommunity"
                              v-model="community.address.community">

                        <a-select-option :value="0">
                            --请选择--
                        </a-select-option>
                        <a-select-option :value="value.id" v-for="(value,index) in community.communityList"
                                         :key="index">
                            {{ value.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="区域分区">
                    <a-select style="width: 200px" @change="onCommunityArea"
                              v-model="community.address.community_area">
                        <a-select-option :value="0">
                            --请选择--
                        </a-select-option>

                        <a-select-option :value="value.id" v-for="(value,index) in community.communityAreaList"
                                         :key="index">
                            {{ value.area_name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>


                <a-form-item label="楼栋">
                    <a-select style="width: 200px" @change="onCommunityTower"
                              v-model="community.address.tower_id">
                        <a-select-option :value="0">
                            --请选择--
                        </a-select-option>

                        <a-select-option :value="value.id" v-for="(value,index) in community.communityTowerList"
                                         :key="index">
                            {{ value.number }}号楼
                        </a-select-option>
                    </a-select>
                </a-form-item>


                <a-form-item label="单元">
                    <a-select style="width: 200px" @change="onCommunityElement"
                              v-model="community.address.element_id">
                        <a-select-option :value="0">
                            --请选择--
                        </a-select-option>

                        <a-select-option :value="value.id" v-for="(value,index) in community.communityElementList"
                                         :key="index">
                            {{ value.number }}单元
                        </a-select-option>
                    </a-select>
                </a-form-item>


                <a-form-item label="楼层">
                    <a-select style="width: 200px" @change="onCommunityFloor"
                              v-model="community.address.floor_id">
                        <a-select-option :value="0">
                            --请选择--
                        </a-select-option>

                        <a-select-option :value="value.id" v-for="(value,index) in community.communityFloorList"
                                         :key="index">
                            {{ value.number }}层
                        </a-select-option>
                    </a-select>
                </a-form-item>


                <a-form-item label="房间">
                    <a-select style="width: 200px" @cancel="onCommunityRoom" v-model="community.address.room_id">
                        <a-select-option :value="0">
                            --请选择--
                        </a-select-option>
                        <a-select-option :value="value.id" v-for="(value,index) in community.communityRoomList"
                                         :key="index">
                            {{ value.number }}
                        </a-select-option>
                    </a-select>
                </a-form-item>


                <a-form-model-item label="住房面积">
                    <a-input v-model="info.housing_area" placeholder=""></a-input>
                </a-form-model-item>

                <a-form-model-item label="套内面积">
                    <a-input v-model="info.inner_area"></a-input>
                </a-form-model-item>

                <a-form-item label="物业缴费方案">
                    <a-select style="width: 200px" v-model="info.property_plan_id">
                        <a-select-option :value="0">
                            --请选择--
                        </a-select-option>
                        <a-select-option :value="value.id" v-for="(value,index) in chargingScheme[0]" :key="index">
                            {{ value.plan_title }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-model-item label="最后缴费月份">
                    <a-date-picker v-model="info.last_payment_time" @change="onChangeTime"/>
                </a-form-model-item>

                <a-form-item label="描述">
                    <wang-editor :contents="info.description" @goods_content="goods_content_fun"/>
                </a-form-item>

                <a-form-item label="电费报警方案">
                    <a-select style="width: 200px" v-model="info.electric_alarm_id">
                        <a-select-option :value="0">
                            --请选择--
                        </a-select-option>
                        <a-select-option :value="value.id" v-for="(value,index) in chargingScheme[1]" :key="index">
                            {{ value.plan_title }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="水费报警方案">
                    <a-select style="width: 200px" v-model="info.water_alarm_id">
                        <a-select-option :value="0">
                            --请选择--
                        </a-select-option>
                        <a-select-option :value="value.id" v-for="(value,index) in chargingScheme[2]" :key="index">
                            {{ value.plan_title }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="物业缴报警方案">
                    <a-select style="width: 200px" v-model="info.property_alarm_id">
                        <a-select-option :value="0">
                            --请选择--
                        </a-select-option>
                        <a-select-option :value="value.id" v-for="(value,index) in chargingScheme[3]" :key="index">
                            {{ value.plan_title }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
                    <a-button type="primary" @click="handleSubmit">提交</a-button>
                </a-form-model-item>

            </a-form-model>

        </div>
    </div>
</template>

<script>
    import wangEditor from "@/components/wangeditor"

    export default {
        components: {wangEditor},
        props: {},
        data() {
            return {
                info: {},
                community: {
                    address : {
                        community :0,
                        community_area :0,
                        tower_id :0,
                        element_id :0,
                        floor_id :0,
                        room_id :0,
                    },
                    communityList:[],
                    communityAreaList:[],
                    communityTowerList : [],
                    communityElementList : [],
                    communityFloorList : [],
                    communityRoomList : [],
                },
                id: 0,
                areas: [],
                chargingScheme: [],
                type:'编辑'
            };
        },
        watch: {},
        computed: {},
        methods: {
            // 获取日期
            onChangeTime(date, dateString) {
                this.info.last_payment_time = dateString
            },
            handleSubmit() {
                // // 验证代码处
                // if (this.$isEmpty(this.info.username)) {
                //     return this.$message.error('用户名不能为空');
                // }
                //
                // let api = this.$apiHandle(this.$api.adminUsers, this.id);
                // if (api.status) {
                //     this.$put(api.url, this.info).then(res => {
                //         if (res.code == 200) {
                //             this.$message.success(res.msg)
                //             return this.$router.back();
                //         } else {
                //             return this.$message.error(res.msg)
                //         }
                //     })
                // } else {
                this.$post(this.$api.estatePlaformownerEdit, this.info).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        return this.$router.back();
                    } else {
                        return this.$message.error(res.msg)
                    }
                })
                // }


            },
            get_info() {
                this.$get(this.$api.estatePlaformownerInof + '/' + this.id).then(res => {
                    this.info = res.data.data;
                    this.community = res.data.community;
                    this.areas[0] = parseInt(res.data.data.province);
                    this.areas[1] = parseInt(res.data.data.city);
                    this.areas[2] = parseInt(res.data.data.area);
                })
            },
            // 获取列表
            onload() {
                // 判断你是否是编辑
                if (!this.$isEmpty(this.$route.params.id)) {
                    this.id = this.$route.params.id;
                    this.get_info();
                }else{
                this.type='添加';
                this.getCommunity();
                this.getchargingScheme();

                }
            }
            ,
            getCommunity() {
                this.$get(this.$api.getCommunity).then(res => {
                    this.community.communityList= res.data;
                })
            },
            getchargingScheme() {
                this.$get(this.$api.getchargingScheme).then(res => {
                    this.chargingScheme = res.data;
                })
            }
            ,   // 编辑器内容修改
            goods_content_fun(val) {
                if (!this.platform) {
                    this.info.description = val;
                } else {
                    this.info.description_mobile = val;
                }
                this.description = val;
            },
            // 编辑器切换平台
            check_platform(status) {
                this.platform = status;
                if (!status) {
                    this.description = this.info.description ?? '';
                } else {
                    this.description = this.info.description_mobile ?? '';
                }
            },
            // 获取城市列表
            get_area() {
                this.$get(this.$api.sysRegion).then(res => {
                    this.options = res.data;
                })
            }, // 省市区发生改变事件
            onChangeArea(value, selectedOptions) {
                this.areas = value;
                this.info.province = value[0];
                this.info.city = value[1];
                this.info.area = value[2];
            },
            // 选择
            onCommunity(id) {

                this.info.community = id;
                this.info.community_area = '';
                this.info.tower_id = '';
                this.info.element_id = '';
                this.info.floor_id = '';
                this.info.room_id = '';
                this.community.address.community_area = 0;
                this.community.address.tower_id = 0;
                this.community.address.element_id = 0;
                this.community.address.floor_id = 0;
                this.community.address.room_id = 0;
                this.$get(this.$api.communityAreaList + '/' + id).then(res => {

                    this.community.communityAreaList = res.data;
                    this.community.communityTowerList = []
                    this.community.communityElementList = []
                    this.community.communityFloorList = []
                    this.community.communityRoomList = []

                })
            },
            onCommunityArea(id) {
                this.info.community_area = id;
                this.info.tower_id = '';
                this.info.element_id = '';
                this.info.floor_id = '';
                this.info.room_id = '';
                this.community.address.tower_id = 0;
                this.community.address.element_id = 0;
                this.community.address.floor_id = 0;
                this.community.address.room_id = 0;
                this.$get(this.$api.communityTowerList + '/' + id).then(res => {

                    this.community.communityTowerList = res.data
                    this.community.communityElementList = []
                    this.community.communityFloorList = []
                    this.community.communityRoomList = []
                })
            }
            ,
            onCommunityTower(id) {

                this.info.tower_id = id;
                this.info.element_id = '';
                this.info.floor_id = '';
                this.info.room_id = '';
                this.community.address.element_id = 0;
                this.community.address.floor_id = 0;
                this.community.address.room_id = 0;
                this.$get(this.$api.communityElementList + '/' + id).then(res => {

                    this.community.communityElementList = res.data
                    this.community.communityFloorList = []
                    this.community.communityRoomList = []
                })
            },
            onCommunityElement(id) {

                this.info.element_id = id;
                this.info.floor_id = '';
                this.info.room_id = '';
                this.community.address.floor_id = 0;
                this.community.address.room_id = 0;
                this.$get(this.$api.communityFloorList + '/' + id).then(res => {

                    this.community.communityFloorList = res.data
                    this.community.communityRoomList = []
                })
            },
            onCommunityFloor(id) {

                this.info.floor_id = id;
                this.community.address.room_id = '';
                this.info.room_id = '';
                this.$get(this.$api.communityRoomList + '/' + id).then(res => {

                    this.community.communityRoomList = res.data
                })
            },
            onCommunityRoom(id) {

                this.info.room_id = id;
            },

            //模板
            get_charging_scheme() {
                this.$get(this.$api.sysRegion).then(res => {
                    this.options = res.data;
                })
            },
        },

        created() {
            this.onload();
            this.get_area();
            this.get_charging_scheme();
            this.getchargingScheme()
        },

        mounted() {

        }
    };
</script>
<style lang="scss" scoped>

</style>
